<template>
	<view>
		<image src="https://img01-xusong.91q.com/99715D14-9B22-4A5A-9885-D1C96207E5B3.png" class="backgroundImg">
		</image>
		<!-- 头像
		使用uview的组件即可，这里先只放一个图片作为演示 -->
		<image class="headImg" :src="touxiang"></image>
		<!-- 轮播图 -->
		<view class="swiper">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots autoplay="true">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in swipers">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 中间的一堆icon -->
		<image class="icons1" src="https://img01-xusong.91q.com/6D1448ED-4EA4-450E-AFBF-C0375DA2A893.png"
			@click="creatAssociation"></image>
		<image class="icons2" src="https://img01-xusong.91q.com/3B43501C-49DF-4635-BED9-7102F8867B52.png"
			@click="releaseActivities"></image>
		<image class="icons3" src="https://img01-xusong.91q.com/AAFB019E-6CF9-45E2-B895-D114ED52FE12.png" @click="goSearch()"></image>
		<view class="iconText1" @click="creatAssociation()">志同道合</view>

		<view class="iconText2" @click="releaseActivities()">组织活动</view>
		<view class="iconText3" @click="goSearch()">搜索</view>
		<!-- 中间的推荐活动栏 -->
		<view class="passText1">推荐活动</view>
		<view v-if="actInformationTmp">
			<view  @click="toAct(actInformationTmp[1])">
				<view class="activity_border1"></view>
				<view class="activity_text1">{{actInformationTmp[1].eventName}}</view>
				<image :src="imgUrl+actInformationTmp[1].imgId" class="activity_image1" mode="aspectFill"></image>
			</view>
			<view  @click="toAct(actInformationTmp[2])">
				<view class="activity_border2"></view>
				<image :src="imgUrl+actInformationTmp[2].imgId" class="activity_image2" mode="aspectFill"></image>
				<view class="activity_text2">{{actInformationTmp[2].eventName}}</view>
			</view>
		</view>
		<!-- 页面底部组件-->
		<view class="bottomBorder"></view>
		<view class="bottomTabsPosition">
			<u-tabs :list="list1" lineWidth="30" lineColor="#BD3124"
				itemStyle="padding-left:30rpx;padding-right:-60rpx;width:284rpx; height:80rpx; " @click="click"
				:activeStyle="{
					color: '#101010 100%',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					
				}" :inactiveStyle="{
					color: '#9B9B9B 100%',
					transform: 'scale(1)'
				}"></u-tabs>
		</view>
		<view class="bottomCard">
			<act-card_heng v-show="isTabs.name==0" v-for="(item,index) in actInformation" :item="item"
				:imgId="item.imgId"
				:eventname="item.eventName">
			</act-card_heng>
			<association-card_heng v-show="isTabs.name==1" v-for="(item,index) in associationInformation" :item="item"
				:imgId="item.imgId"></association-card_heng>
		</view>
		<!-- 筛选 -->
		<image src="https://img01-xusong.91q.com/5EA3B3CF-495B-4142-9F00-97A14E5A1F91.png" class="shaixuanIcon"
			@click="show = true"></image>
		<u-popup :show="show" @close="close" @open="open" :round="20" closeable>
			<view>
				<shaixuan_act v-show="isTabs.name==0" v-on:pclose="close()" @updatevalue="updatevalue"></shaixuan_act>
				<shaixuan_association v-show="isTabs.name==1" v-on:pclose="close()" @unpate_value1="unpate_value1">
				</shaixuan_association>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import shaixuan_act from '../../components/shaixuan_act.vue'
	import shaixuan_association from '../../components/shaixuan_association.vue'
	import actCard_heng from '../../components/actCard_heng.vue'
	import associationCard_heng from '../../components/associationCard_heng.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			shaixuan_act,
			shaixuan_association,
			actCard_heng,
			associationCard_heng
		},
		data() {
			return {
				show: false,
				touxiang: this.$store.state.userInfo.avatarUrl,
				userId: this.$store.state.userInfo.openid,
				actList: [],
				imgUrl: 'https://www.codingyt.com/getImage/',
				isTabs: {
					name: '',
				},
				swipers: [
					'https://img01-xusong.91q.com/513EFD4A-E347-4E97-8AFC-4E460D25FAEB.png',
					'https://img01-xusong.91q.com/AF493CC5-1061-43FB-986A-AAEEBE11F0F8.png',
					'https://img01-xusong.91q.com/2FC21874-2553-4C52-A3F0-4F71F0AA92FD.png',
					'https://img01-xusong.91q.com/F30DBA2B-BB8D-4D86-BAFF-8B13F64B9267.png',
					'https://img01-xusong.91q.com/F7520A83-4E65-4B11-872F-F0C04C31D970.png'

				],
				list1: [{
						name: '活动 ACTIVITY',
					},
					{
						name: '社团 ASSOCIATION',
					},

				],
				actInformation: [],
				actInformationTmp:[],
				associationInformation: [],
				// recommendAct1:[]
			}

		},

		methods: {
			goSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			//筛选层的打开与关闭
			updatevalue(val) {

				this.actInformation = val

			},
			unpate_value1(val) {
				this.associationInformation = val
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toAct(e) {
				uni.navigateTo({
					url: './act?content=' + JSON.stringify(e),
				})
			},
			...mapMutations(['login']),
			click(item) {

				this.isTabs.name = item.index;
			},
			//创建社团 加上我们的数据变量进行判断
			creatAssociation() {
				// //进行判断 要是没有授权 我们就进行授权登陆
				// console.log(this.$store.state.hasLogin);
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else if (this.$store.state.inforOver) {
					uni.navigateTo({
						url: './creatAssociation',
						success: (res) => {
							// console.log(res)
						}
					})
				} else {
					uni.showModal({
						content: '您还未完善个人信息，请完善个人信息之后在进行创建活动',
						success() {

						}
					})
				}
			},
			releaseActivities() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else if (this.$store.state.inforOver) {
					uni.navigateTo({
						url: './releaseActivities',
						success: (res) => {

						}
					})
				} else {
					uni.showModal({
						content: '您还未完善个人信息，请完善个人信息之后在进行创建活动',
						success() {

						}
					})
				}


			},
			getList() {
				let that = this;
				uni.request({
					url: "https://www.codingyt.com/club/event/list",
					method: 'get',
					data: {
						"current": 0,
						"size": 99,
						 "isPending":'notPending'
					},
					dataType: 'json',
					success: (res) => {
						// console.log(res.data.data);
						that.actInformationTmp=res.data.data;
						that.actInformation = res.data.data;
					},
				});
			},
			getList2() {
				let that = this;
				uni.request({
					url: "https://www.codingyt.com/club/organization/list",
					method: 'get',
					data: {
						"current": 0,
						"size": 99,
						 "isPending":'notPending'
					},
					dataType: 'json',
					success: (res) => {
						that.associationInformation = res.data.data;
					},
				});
			},
			checkYourInfor() {
				let that = this

				uni.request({
					url: 'https://www.codingyt.com/club/wxuserinfo/select',
					data: {
						openid: that.userId
					},
					success(res) {

						var realname = res.data.data[0].realname
						var sex = res.data.data[0].sex
						var phone = res.data.data[0].phonenumber
						var school = res.data.data[0].school
						var schoolId = res.data.data[0].schoolcode

						if ((realname != undefined) && (sex != undefined) && (phone != undefined)
								) {

							that.$store.state.inforOver = true;

						} else {

						}
					}
				})
			},
		},

		mounted() {

		},
		created() {
			this.checkYourInfor()
			this.getList()
			this.getList2()
			// this.getUserTest()
		},
		onShow(){
			let that = this
			if(this.$store.state.hasLogin == true){
				that.userId=this.$store.state.userInfo.id;
				that.touxiang=this.$store.state.userInfo.avatarUrl;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";

	.backgroundImg {
		left: -2rpx;
		top: 220rpx;
		width: 750rpx;
		height: 920rpx;
		position: absolute;
		z-index: -50;
	}

	.headImg {
		left: 32rpx;
		top: 86rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 200rpx;
		position: absolute;
		z-index: 2;
	}

	.swiper {
		swiper {
			width: 750rpx;
			height: 452rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		overflow: hidden;
		border-radius: 0rpx 0rpx 80rpx 80rpx;
		box-sizing: border-box;
		width: 100%;
		transform: translateY(0); // 关键属性
		line-height: 1rpx; // 可以简单调整圆点位置
	}

	.icons1 {
		left: 95rpx;
		top: 496rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
		z-index: 2;
	}

	.icons2 {
		left: 352rpx;
		top: 496rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
		z-index: 2;
	}

	.icons3 {
		left: 590rpx;
		top: 496rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
		z-index: 2;
	}

	.iconText1 {
		left: 83rpx;
		top: 570rpx;
		width: 96rpx;
		height: 34rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
		z-index: 2;
	}

	.iconText2 {
		left: 338rpx;
		top: 570rpx;
		width: 96rpx;
		height: 34rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
		z-index: 2;
	}

	.iconText3 {
		left: 600rpx;
		top: 570rpx;
		width: 48rpx;
		height: 34rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
		z-index: 2;
	}

	.passText1 {
		left: 38rpx;
		top: 622rpx;
		width: 144rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
		z-index: 2;
		font-weight: 600;
	}

	.activity_border1 {
		left: 32rpx;
		top: 700rpx;
		width: 310rpx;
		height: 280rpx;
		line-height: 40rpx;
		border-radius: 32rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 0rpx 46rpx -20rpx rgba(0, 0, 0, 0.4);
		position: absolute;
		z-index: 2;
	}

	.activity_border2 {
		left: 402rpx;
		top: 700rpx;
		width: 310rpx;
		height: 280rpx;
		line-height: 40rpx;
		border-radius: 32rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 0rpx 46rpx -20rpx rgba(0, 0, 0, 0.4);
		position: absolute;
		z-index: 2;
	}

	.activity_image1 {
		left: 42rpx;
		top: 708rpx;
		width: 290rpx;
		height: 168rpx;
		border-radius: 32rpx;
		position: absolute;
		z-index: 2;
	}

	.activity_image2 {
		left: 412rpx;
		top: 708rpx;
		width: 290rpx;
		height: 168rpx;
		border-radius: 32rpx;
		position: absolute;
		z-index: 2;
	}

	.activity_text1 {
		left: 70rpx;
		top: 890rpx;
		width: 250rpx;
		height: 80rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		font-weight: 700;
		position: absolute;
		z-index: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.activity_text2 {
		left: 440rpx;
		top: 890rpx;
		width: 250rpx;
		height: 80rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		font-weight: 700;
		position: absolute;
		z-index: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bottomBorder {
		left: 2rpx;
		top: 1022rpx;
		width: 748rpx;
		height: 120rpx;
		line-height: 40rpx;
		border-radius: 52rpx 52rpx 0rpx 0rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		// box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0, 0, 0, 0.4);
		box-shadow: 0rpx -22rpx 50rpx -36rpx rgba(0, 0, 0, 0.4);
		position: absolute;
		z-index: 2;
	}

	.bottomTabsPosition {
		position: relative;
		left: -15rpx;
		top: 592rpx;
		z-index: 5;
	}

	.shaixuanIcon {
		left: 680rpx;
		top: 1068rpx;
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		z-index: 50;
	}

	.bottomCard {
		left: -16rpx;
		top: 1180rpx;
		position: absolute;
		z-index: 50;
	}
</style>
